<template>
  <div class="container">
    <div class="heading">
      <p>前沿资讯</p>
    </div>

    <div class="card-group">

      <div class="card">
        <a :href="hrefs[0]" target="_blank">
          <img :src="imgs[0]" class="card-img-top image" alt="...">
        </a>
        <div class="card-body">
          <a :href="hrefs[0]" target="_blank">
            <h5 class="card-title title">{{titles[0]}}</h5>
          </a>
          <p class="card-text">{{contents[0]}}</p>
          <p class="card-text"><small class="text-muted">{{times[0]}}</small></p>
        </div>
      </div>

      <div class="card">
        <a :href="hrefs[1]" target="_blank">
          <img :src="imgs[1]" class="card-img-top image" alt="...">
        </a>
        <div class="card-body">
          <a :href="hrefs[1]" target="_blank">
            <h5 class="card-title title">{{titles[1]}}</h5>
          </a>
          <p class="card-text">{{contents[1]}}</p>
          <p class="card-text"><small class="text-muted">{{times[1]}}</small></p>
        </div>
      </div>

      <div class="card">
        <a :href="hrefs[2]" target="_blank">
          <img :src="imgs[2]" class="card-img-top image" alt="...">
        </a>
        <div class="card-body">
          <a :href="hrefs[2]" target="_blank">
            <h5 class="card-title title">{{titles[2]}}</h5>
          </a>
          <p class="card-text">{{contents[2]}}</p>
          <p class="card-text"><small class="text-muted">{{times[2]}}</small></p>
        </div>
      </div>

    </div>
    <div class="card-group" style="margin-top: 5px">

      <div class="card">
        <a :href="hrefs[3]" target="_blank">
          <img :src="imgs[3]" class="card-img-top image" alt="...">
        </a>
        <div class="card-body">
          <a :href="hrefs[3]" target="_blank">
            <h5 class="card-title title">{{titles[3]}}</h5>
          </a>
          <p class="card-text">{{contents[3]}}</p>
          <p class="card-text"><small class="text-muted">{{times[3]}}</small></p>
        </div>
      </div>
      <div class="card">
        <a :href="hrefs[4]" target="_blank">
          <img :src="imgs[4]" class="card-img-top image" alt="...">
        </a>
        <div class="card-body">
          <a :href="hrefs[4]" target="_blank">
            <h5 class="card-title title">{{titles[4]}}</h5>
          </a>
          <p class="card-text">{{contents[4]}}</p>
          <p class="card-text"><small class="text-muted">{{times[4]}}</small></p>
        </div>
      </div>
      <div class="card">
        <a :href="hrefs[5]" target="_blank">
          <img :src="imgs[5]" class="card-img-top image" alt="...">
        </a>
        <div class="card-body">
          <a :href="hrefs[5]" target="_blank">
            <h5 class="card-title title">{{titles[5]}}</h5>
          </a>
          <p class="card-text">{{contents[5]}}</p>
          <p class="card-text"><small class="text-muted">{{times[5]}}</small></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'News',
  data () {
    return {
      hrefs: [
        'https://gas.in-en.com/html/gas-3273576.shtml',
        'https://gas.in-en.com/html/gas-3274400.shtml',
        'https://gas.in-en.com/html/gas-3274402.shtml',
        'https://gas.in-en.com/html/gas-3274403.shtml',
        'https://gas.in-en.com/html/gas-3274405.shtml',
        'https://gas.in-en.com/html/gas-3275287.shtml'
      ],
      imgs: [
        '../../static/images/NewsImages/01.png',
        '../../static/images/NewsImages/02.png',
        '../../static/images/NewsImages/03.png',
        '../../static/images/NewsImages/04.png',
        '../../static/images/NewsImages/05.png',
        '../../static/images/NewsImages/06.png'
      ],
      titles: [
        '12亿美元！红星造船厂再获4艘破冰型LNG船订单',
        '开年屡遭打击的LNG市场，会迎来价格反弹吗？',
        '歌诗达邮轮第二艘LNG动力豪华邮轮启动船体装配工作',
        '全球首艘电池LNG混合动力渔船下水',
        '2月3日-9日中国LNG综合进口到岸价格环比下降16%至2596元/吨',
        '现代三湖重工一艘17.4万方LNG船命名'
      ],
      contents: [
        '俄罗斯航运公司Smart LNG将在俄罗斯红星造船厂（Zvezda）订造4艘Arc7破冰型LNG船，用于Novatek的北极Arctic LNG 2项目，4艘船总价值预计将达到12亿美元...',
        '隆众资讯数据显示，2月12日，华南、华东等多个地区LNG的市场价格保持在3900元/吨左右，较前一日回升100元-200元/吨，扭转了从12月中旬便一路下滑的态势。价格止跌回升释放了LNG市场回暖的信号，但是会继续涨势吗...',
        '近日，芬兰船厂Meyer Turku启动了歌诗达邮轮（Costa Cruises）第二艘LNG动力豪华邮轮“Costa Toscana”号的船体装配工作。“Costa Toscana”号在去年夏季切割钢板，计划在2021年8月交付运营，届时将成为北美第一艘LNG动力邮轮...',
        '土耳其造船厂Cemre建造的全球首艘电池和LNG混合驱动渔船日前顺利下水。据悉，这艘围网/拖网渔船名为"Libas"号，于2月7日在Cemre船厂下水，在完成最后的装配后，预计将于今年二季度交付...',
        '2月12日，海关总署全球贸易监测分析中心和上海石油天然气交易中心联合发布的中国LNG综合进口到岸价格显示，2月3日-9日，中国LNG综合进口到岸价格为2596元/吨，较前一周（3089元/吨）下跌493元/吨，跌幅达16%...',
        '韩国现代三湖重工近日命名了为俄罗斯国家航运公司Sovcomflot建造的最新一艘174000立方米LNG船，这艘船以法国太平洋探险家Jean-Jean-François de la Pérouse的名字命名，被命名为“SCF La Perouse”号...'
      ],
      times: [
        'Last updated 1 mins ago',
        'Last updated 2 mins ago',
        'Last updated 3 mins ago',
        'Last updated 4 mins ago',
        'Last updated 5 mins ago',
        'Last updated 6 mins ago'
      ]
    }
  }
}
</script>

<style scoped src="../../node_modules/bootstrap/dist/css/bootstrap.css"></style>

<style scoped>
  .container {
    margin-left: 200px;
    padding-top: 20px;
    background: white;
  }

  .heading {
    margin-bottom: 20px;
    color: #03009c;
    border-left: 5px solid #03009c;
    padding-left: 20px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: "Microsoft YaHei", SimSun, '\5b8b\4f53', sans-serif;
  }

  .image {
    height: 200px;
  }

  .title {
    font-weight: 700;
    font-family: Microsoft YaHei;
  }
</style>
